<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<%@ include file="/common/ssb/include/common-base.jsp"%>
	<title>渠道商保费走势图</title>
	<!-- Tell the browser to be responsive to screen width -->
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>

<!-- Part 一、 以下是body主体内容的模块区域 -->
<body class="hold-transition ${sysColor} sidebar-mini">
<div class="wrapper">

	<!-- top start -->
	<%@include file="/common/ssb/top.jsp" %>
	<!-- top end -->
	<!-- left start -->
	<%@include file="/common/ssb/left.jsp" %>
	<!-- left end-->

	<div class="content-wrapper">
		<!-- Main start -->
		<section class="content">
			<div id="div_hidden_content" class="hidden" style="display:none;">
				<input name="templateType" type="hidden" value="all"/>
				<div id="hidden_common_final">
					<!-- temp="hidden_common_final" start -->
					<input name="mainObjName" type="hidden" value="uctUser">
					<input name="mainObjPrimaryKey" type="hidden" value="userId">
					<input name="objNameAll" type="hidden" value="uctUser">
					<!-- temp="hidden_common_final" end -->
				</div>
				<!-- temp="delForm_hidden" start -->
				<div id="delForm_hidden" style="display:none;">
					<input type="hidden" name="pageName" value="user-list"/>
					<input type="hidden" name="formName" value="delForm"/>
				</div>
				<!-- temp="delForm_hidden" end -->
			</div>
			<div class="row">
				<div class="col-xs-12">
					<textarea rows="1" id="copy_textarea" style="display: none" cols="100"></textarea>
					<!------搜索  start ------->
					<div class="box box-info">
						<!--搜索title  start -->
						<div class="box-header with-border">
							<h3 class="box-title"><i class="fa fa-search"></i> 渠道商搜索</h3>
							<div class="box-tools pull-right">
								<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
							</div>
						</div>
						<!--搜索title  end -->
						<div class="box-body">
							<div style="display:none;">
								<div class="form-group">
									<select id="searchForm_ssInsurPro_proType" class="form-control "
											data-dict-code="dictItemList" data-dict-cate="proCategory" data-type-tag="select">
										<option value="">--请选择--</option>
									</select>
								</div>
							</div>
							<form id="searchForm" action="javascript:;">
								<!-- temp="searchForm_hidden" start -->
								<div id="searchForm_hidden" style="display:none;">
									<input type="hidden" name="pageName" value="user-list"/>
									<input type="hidden" name="formName" value="searchForm-new"/>
									<input type="hidden" name="uctUser.w_userType" value="broker"/>
									<input type="hidden" name="uctUser.w_sysEname" value="ssb"/>
									<c:if test="${loginUser.userType=='broker'}">
										<input type="hidden" name="uctUser.w_orgId" value="${loginUser.userId}"/>
									</c:if>

									<input type="hidden" name="orderBy" value="uctUser.create_time desc"/>
								</div>
								<!-- temp="searchForm_hidden" end -->

								<!-- temp="searchForm_content" start -->
								<div id="searchForm_content" class="form-group"  data-temp-code="true" data-temp-type="searchForm" data-temp-form-id="searchForm">


									<table class="table table-bordered bordercolor">
										<tbody>
										<tr>
											<td class="active" align="right"><label class="form-control-static">渠道商名称：</label></td>
											<td>
												<div class="form-group"><input name="uctUser.wl_userCname" class="form-control clean"
																			   maxlength="30" data-temp-obj="uctUser.userCname"></div>
											</td>
											<td class="active" align="right"><label class="form-control-static">渠道商账号：</label></td>
											<td>
												<div class="form-group"><input name="uctUser.wl_userEname" class="form-control clean"
																			   maxlength="30" data-temp-obj="uctUser.userEname"></div>
											</td>

										</tr>
										</tbody>
									</table>
								</div>
								<!-- temp="searchForm_content" end -->
							</form>
							<div class="box-footer text-center">
								<button type="button" class="btn btn-success" onclick="getTableData();" data-temp-event="searchForm_hidden"><i class="fa fa-search"></i> 查询</button> 
								<button type="button" class="btn btn-warning" onclick="mytools.cleanData('#searchForm');">重置 </button>
							</div>
						</div>
					</div>
					<!------- 搜索 end -------->

					<!------- 列表 start -------->
					<div class="box box-success">
						<!--列表title  start -->
						<div class="box-header with-border">
							<h3 class="box-title"><i class="fa fa-table"></i> 查询结果
							</h3>
							<div class="box-tools pull-right">
								<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
							</div>
						</div>
						<div class="box-body">
							<table id="dataList" class="table table-bordered table-hover">
								<thead>
								<tr id="dataList_thead_content" data-temp-code="true" data-temp-type="table" data-temp-show="dataList_template_content">
									<th>序号</th>
									<!-- temp="dataList_thead_content" start -->
									<th data-temp-obj="uctUser.userCname">渠道商名称</th>
									<th data-temp-obj="uctUser.userEname">渠道商账号</th>
									<th>操作</th>
									<!-- temp="dataList_thead_content" end -->
								</tr>
								</thead>
								<tbody id="dataList-body">

								</tbody>
							</table>
						</div>

						<div class="box-footer text-center">
							<ul id="dataList-page" class="pagination">
							</ul>
						</div>
					</div>
					<!------- 列表 end -------->
				</div>
			</div>

			<div win-title="查看窗口" class="modal fade" id="my_modal_view" tabindex="-2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog" style="width:80%;">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								×
							</button>
							<h4 class="modal-title">
								<font color="red">走势图</font> 
							</h4>
							<form id="viewForm" action="javascript:void(0)">
								<!-- temp="viewForm_hidden" start -->
								<div id="viewForm_hidden" style="display:none;">
									<input type="hidden" name="pageName" value="user-list"/>
									<input type="hidden" name="formName" value="searchForm-new"/>
									<input type="hidden" name="uctUser.w_userId" value=''/>
								</div>
								<!-- temp="viewForm_hidden" end -->
							</form>
						</div>
						<div class="modal-body viewForm">

							<div class="nav-tabs-custom">
								<ul class="nav nav-tabs" id="myTab-view">
								</ul>

								<!-- tab content start -->
								<div class="tab-content">

									<div class="tab-pane active" id="tabView_1">
										<form class="form-horizontal" role="form" id="viewForm1" action="javascript:void(0)">

											<!-- temp="viewForm1_content" start -->
											<div id="viewForm1_content" class="row viewForm">


											</div>
											<!-- temp="viewForm1_content" end -->

										</form>
										<div class="form-group">
											<div class="col-sm-12">
												<div class="box-footer text-center">
													<button class="btn btn-success pull-right" type="button" onclick="mytools.closeModal('my_modal_view');"> 关闭 </button>
												</div>
											</div>
										</div>
									</div>


								</div>
								<!-- tab content e -->
							</div>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
			</div>

			<!-- Part 二、以下是template模板定义的模块区域 -->
			<script type="text/template" id="dataList-template">
				<? for ( var i = 0; i < rows.length; i++) {?>
				<tr>
					<td><?=(pageObj.currentPage-1)*pageObj.rows+(i+1)?></td>
					<!-- temp="dataList_template_content" start -->
					<td><?=strUtil.doNull(rows[i].uctUser.userCname,'')?></td>
					<td><?=strUtil.doNull(rows[i].uctUser.userEname,'')?></td>
					<!-- temp="dataList_template_content" end -->
					<td>
						<button type="button" class="btn btn-success btn-xs" onclick="toLoad('<?=rows[i].uctUser.userId?>','<?=rows[i].uctUser.userEname?>')"><i class="fa fa-search-plus"></i> 查看</button>  
					</td>
				</tr>
				<?}?>
			</script>

			<!-- Part 三、 以下是js模块区域 -->
			<script>
				var clickMenu = "highcharts-channel-list";
				var myPage,dataListId,searchFormId;
				myPage = 10;//定义列表数据
				dataListId = "dataList";//显示列表数据div的id
				searchFormId = "searchForm";//搜索表单Id
				/**
				 * 初始化数据字典，id传入#id 返回值Map用法：dictListMap["userType"][rows[i].userType]
				 */
				var dictListMap = DictUtil.initDictAndDymic();

				$(function () {
					//1、加载分页列表数据
					getTableData();

					//2、控制是否启用token
					//setToken();

				});

				$(function () {
					//设置数据行选中效果
					$('#'+dataListId+' tbody').on('click','tr', function (e) {
						if ( $(this).hasClass('selected') ) {
						}
						else {
							$('tr.selected').removeClass('selected');
							$(this).addClass('selected');
						}
					} );
				});
				//注入日历框样式
				var dateObject = $('.datepicker').datepicker( {
					language : 'zh-CN',
					//inline: true,
					todayBtn : "linked",
					format : "yyyy-mm-dd",
					autoclose: true
				}).on('hide',function(e) {
					//bootstrap datepicker与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决方法
					//当日期选择框关闭时，执行刷新校验。
					var fieldName = $(this).attr("name");//获取当前元素name
					var formId = $(this).parents("form").eq(0).attr("id");//获取当前元素所在父层级中的就近的formId
					$("#"+formId).data('bootstrapValidator').updateStatus(fieldName,'NOT_VALIDATED',null).validateField(fieldName);
				});

				//给模态窗口内form表单内的所有支持必填项的元素注入校验
				$(".modal").on('shown.bs.modal', function () {
					$(this).find("form").each(function(){
						var formId = $(this).attr("id");
						if(!strUtil.isNull(formId)){
							formId="#"+formId;
							setValidate(formId);//定义add表单验证属性
							mytools.cleanValidate(formId);//清空上次校验规则提示
						}
					});
				});

				//打开添加modal


				function copyUrl(obj,channelId,channelName) {
					var textContent = $(obj).attr("title");
					$('#copy_textarea').val(textContent).show();
					var copy_textareaObj=document.getElementById("copy_textarea");
					copy_textareaObj.select(); // 选择对象
					document.execCommand('copy', false, null);
					$('#copy_textarea').hide();
					layer.msg("复制链接成功！");
				}

				//数据toLoad读取（查看、编辑）数据
				function toLoad(userId,userEname){
					$("#my_modal_view").modal("show");

					var paramLoadData = {};
					paramLoadData["pageName"]="ss-order-search-statistical";
					paramLoadData["formName"]="searchForm";
					paramLoadData["uctUser.userId"]=userId;
					paramLoadData["uctUser.userEname"]=userEname;
					$.get(common_list_url, paramLoadData,function(myData){
						console.log(myData);
						//反显加载数据
						if(myData.flag=="T"){
							var monthList=[];
							var premiumList=[];
							var rows=myData.rows;
							for(var i=0;i<myData.total;i++){
								monthList.push(rows[i].yearmonth);
								premiumList.push(rows[i].premium);
							}
							Highcharts.chart('viewForm1_content',{
								chart: {
									type: 'line'
								},
								title: {
									text: '月保费'
								},
								xAxis: {
									categories: monthList
								},
								yAxis: {
									title: {
										text: '保费'
									}
								},
								plotOptions: {
									line: {
										dataLabels: {
											// 开启数据标签
											enabled: true
										},
										// 关闭鼠标跟踪，对应的提示框、点击事件会失效
										enableMouseTracking: false
									}
								},
								series: [{
									name:'保费',
									data: premiumList
								}]
							});
						}

					},"json");
				}
				//加载列表数据
				function getTableData(){
					if(strUtil.isNull($("#"+searchFormId).find("input[name='pageName']").val())){return;}
					var index_load = layer.load(1, {shade: false});
					$.ajax({
						type:'get',
						url:common_list_url,
						data:$("#"+searchFormId).serialize()+getCurrentPage(common_list_url+"?"+$("#"+searchFormId).serialize(),myPage),
						dataType:'json',
						success: function(myData){
							console.log(myData);
							if("T"==myData.flag){
								var data = baidu.template(dataListId+"-template",eval(myData));
								$("#"+dataListId+"-body").html(data);
								var option= {
									ele:$("#"+dataListId+"-page")[0],
									total:myData.total,
									fn:getTableData,
									url:common_list_url+"?"+$("#"+searchFormId).serialize()
								}
								generatePages(option);

							}
							layer.close(index_load);
						}
					});
				}
				//刷新
				function refresh(){
					getTableData();
				}
				//设置token
				function setToken(){
					$.ajax({
						type:'get',
						url:'${ctx}/sendPage/token?token=true',
						dataType:'text',
						success: function(myData){
							console.log(myData);
							$('.formToken').val(myData);
						}
					});
				}


				/**** Part 四、以下是自定义新增方法  ****/
//1.定义校验规则-定义
				function setValidate(id){
					$(id).each(function(){
						$(this).bootstrapValidator({
							feedbackIcons: {
								valid: 'glyphicon glyphicon-ok',
								invalid: 'glyphicon glyphicon-remove',
								validating: 'glyphicon glyphicon-refresh'
							},/** 以下需要结合实际业务清空补充个表单元素的验证规则 **/
							fields:{
								/**
								 "uctUser.usbKey":{
		    		 validators: {
						 // regexp: {regexp: /^\d+$|^\d*\.\d+$/, message: '只能输入数字'},
						 notEmpty: { message: '此项不能为空!' },
						 greaterThan: { inclusive:false,value: 0, message: '最小输入0' },
						 lessThan: { inclusive:false, value: login_usbKey, message: '最大输入'+login_usbKey },
						 numeric: { message: '只能输入数字' }
		              }
				}**/
							}
						});
					});
				}


			</script>
		</section>
		<!-- Main end -->
	</div>
	<!-- foot start -->
	<%@include file="/common/ssb/foot.jsp" %>
	<!-- foot start -->
</div>
<!-- /.content-wrapper -->
</body>
</html>






















